<template>
	<view class="page-apply-leave">
		<view class="row-list">
			<picker @change="bindPickerChangeStatus" :value="formValidate.type" :range="typeList" range-key="name">
				<view class="row-item">
					<view class="input-item-l">请假类型：</view>
					<view class="more align-center">
						<view class="picker-val">{{formValidate.type ? leaveType[formValidate.type] : '请选择请假类型'}}</view>
						<image src="/static/arrow.png" mode=""></image>
					</view>
				</view>
			</picker>
			<view class="row-item" @tap="showDatePicker">
				<view class="input-item-l">
					请假时间
					<text class="star">*</text>
				</view>
				<view class="more align-center">
					<view class="picker-val">{{formValidate.leave_time ? formValidate.leave_time : '请选择请假时间'}}</view>
					<image src="/static/arrow.png" mode=""></image>
				</view>
			</view>
			<!-- <view class="row-item">
				<view class="input-item-l">
					请假时长
				</view>
				<view class="more align-center">

				</view>
			</view> -->
		</view>
		<view class="reason-container">
			<view class="title">
				请假原因<text class="star">*</text>
			</view>
			<view class="reason-input">
				<input type="text" v-model="formValidate.reason" value="" placeholder="请输入请假原因" />
			</view>
			<view class="upload-img">
				<view class="upload-act align-center" @tap="handleUploadImg">
					<image src="/static/camera.png" mode=""></image>
				</view>
				<view class="img-item" v-for="(v, k) in leaveImgs" :key="k">
					<image :src="v" mode=""></image>
				</view>
			</view>
		</view>
		<view class="submit-btn" @tap="handleSubmit">
			立即提交
		</view>

		<w-picker :visible.sync="dateVisible1" mode="date" startYear="2021" endYear="2029" :value="currentDate"
		 :current="false" fields="second" @confirm="onConfirm($event,'date1')" @cancel="onCancel" :disabled-after="false" ref="date1"></w-picker>
		 
		
		<tabbar></tabbar>
	</view>
</template>

<script>
	let {
		httpPost,
		msg,
		ossUpFile,
		timeToStr
	} = require('@/utils/common.js');
	let currentDate = timeToStr(new Date().getTime()/1000, 'yyyy-MM-dd hh:mm:ss');
	export default {
		data() {
			return {
				leaveType: {
					'1': '事假',
					'2': '病假'
				},
				typeList: [{
						id: 1,
						name: '事假'
					},
					{
						id: 2,
						name: '病假'
					},
				],
				formValidate: {
					type: '',
					leave_time: ''
				},
				leaveImgs: [],
				dateVisible1: false,
				currentDate
			}
		},
		onLoad(options) {

		},
		methods: {
			bindPickerChangeStatus(e) {
				this.formValidate.type = this.typeList[e.detail.value].id;
			},
			showDatePicker() {
				this.dateVisible1 = true;
			},
			onConfirm(e) {
				this.$set(this.formValidate, 'leave_time', e.result);
			},
			onCancel() {},
			handleUploadImg() {
				uni.chooseImage({
					success: (res) => {
						// this.leaveImgs = [...this.leaveImgs, ...res.tempFilePaths]; 本地图片
						for (let i = 0; i < res.tempFiles.length; i++) {
							ossUpFile(res.tempFiles[i], (url, key) => {
								this.leaveImgs.push(url);
							})
						}
					}
				})
			},
			handleSubmit() {
				let params = {
					...this.formValidate
				}
				if (this.leaveImgs.length > 0) {
					params.leave_imgs = this.leaveImgs.join(',');
				}
				if (!params.type) {
					msg('请选择请假类型！', 'none');
					return;
				}
				if (!params.reason) {
					msg('请填写请假原因！', 'none');
					return;
				}
				httpPost({
					url: 'users/leave/post',
					data: params,
				}).then(res => {
					msg('申请成功，等待审核！');
				})
			}
		}
	}
</script>

<style lang="less">
	page {
		background-color: #f5f5f5;
	}

	.align-center {
		display: flex;
		align-items: center;
	}

	.page-apply-leave {
		font-size: 26rpx;
		color: #333;

		.row-list {
			background-color: #fff;
		}

		.row-item {
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 96rpx;
			margin: 0 30rpx;
			border-bottom: 1px solid #eaeaea;

			.more {
				image {
					width: 18rpx;
					height: 30rpx;
				}

				.picker-val {
					color: #333;
					margin-right: 15rpx;
				}
			}
		}

		.reason-container {
			margin-top: 10rpx;
			background-color: #fff;
			padding: 30rpx;

			.reason-input {
				input {
					height: 96rpx;
					line-height: 96rpx;
				}
			}

			.upload-img {
				display: flex;

				.upload-act {
					height: 72rpx;
					width: 72rpx;
					background-color: #f5f5f5;
					justify-content: center;
					border-radius: 8rpx;

					image {
						width: 38rpx;
						height: 32rpx;
					}
				}

				.img-item {
					height: 72rpx;
					width: 72rpx;
					margin-left: 12rpx;

					image {
						border-radius: 8rpx;
						height: 72rpx;
						width: 72rpx;
					}
				}
			}
		}

		.star {
			color: #fc6053;
			font-size: 30rpx;
			margin-left: 17rpx;
		}

		.submit-btn {
			margin: 100rpx auto 0;
			height: 80rpx;
			width: 600rpx;
			border-radius: 80rpx;
			text-align: center;
			line-height: 80rpx;
			background-color: #3086ff;
			color: #fff;

		}
	}
</style>
